<!--自由课程调查页-->
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="format-detection" content="telephone=no" />
		<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
		<link rel="stylesheet" href="../../css/mui.min.css" />
		<script src="../../script/mui.min.js"></script>
		<link rel="stylesheet" href="../../css/swiper-3.4.2.min.css">
		<link rel="stylesheet" type="text/css" href="../../css/weui.min.css">
		<link rel="stylesheet" href="../../css/base.css"/>
		<link rel="stylesheet" href="../../css/exam.css">
		<link rel="stylesheet" type="text/css" href="../../css/people_diaocha.css"/>
		<link rel="stylesheet" type="text/css" href="../../css/singlePeo_diaocha.css"/>
		<title>老师端自由课程调查章节预览页</title>
		<script type="text/javascript" charset="utf-8">
			mui.init();
		</script>
		<style>
			.question_main .question_answer {
				padding: 0.2em 0em 0em 2em;
				background: #fff;
				margin-bottom: 20px;
			}
			.question_title1 {
				font-size: 16px;
				color: #333333;
				padding: 0.1em 1em 0 1em;
				margin-bottom: 2px;
			}
			.question_title {
				font-size: 16px;
				color: #333333;
				padding: 0.2em 1em 0.2em 1em;
				margin-bottom: 2px;
			}
			.diaocha_question:nth-child(1) {
				padding-top: 10px;
			}
			.weui_mask {
				position: fixed;
				z-index: 998;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
			}
			.weui_dialog {
				z-index: 999;
			}
			.k-con1 {
				padding-top: 2px;
				padding-bottom: 36px;
			}
			.stu-test .test_card_div {
				font-size: 14px;
				position: absolute;
				right: 20px;
				top: -4px;
			}
			.test-answer-list .mui-checkbox.wrong input[type=checkbox]:checked, .test-answer-list .mui-radio.wrong input[type=radio]:checked {
				border-color: inherit;
				background-color: transparent;
			}
			.test-answer-list input[type=checkbox]:before, .test-answer-list input[type=radio]:before {
				color: #3e2727;
				display: block;
				text-align: center;
				line-height: 40px;
				font-family: inherit;
				font-size: 24px;
			}
			.swiper-wrapper {
				min-height: 500px;
				height: 100%
			}
			.footer_div {
				/*background: #f3f5f7;*/
				width: 100%;
				height: 100%
			}
			.PieChart_div {
				height: 200px;
				/*max-height: 400px;*/
				padding-left: 10px;
				padding-right: 12px;
				padding-top: 12px;
				width: 100%
			}
			.question_answer li {
				line-height: 30px;
			}
			.Bar_center {
				margin-top: 2px;
				margin-bottom: 12px;
			}
			.Bar_left {
				margin-top: 10px;
				margin-bottom: 12px;
			}
			.question_answer li p {
				margin-bottom: 4px;
				
			}
			
			.nomalColor {
				background: #FFFFFF
			}
			.questionItemImgDiv {
				height: 60%;
				width: 80%;
				max-height: 200px;
				max-width: 95%;
				margin-left: 13px;
			}
			.xuanzeImgDiv {
				width: 90%;
				height: 8em
			}
			.question_video_div {
				padding: 10px 10px;
				padding-left: 20px;
			}
			.question_video_div	video {
				width: 100%;
				height: 13em;
				background-color: black;
			}
			.question_video_div	img {
				width: 100%;
				height: 10em;
				background-color: black;
			}
			.option_video_div {
				padding: 10px 10px;
				padding-right: 20px;
			}
			.option_video_div	img {
				width: 100%;
				height: 8rem;
				background-color: black;
			}
			.option_video_div	video {
				width: 100%;
				height: 12em;
			}
		</style>
	</head>
	<body >
		<div class="stu-test" id="scroll">
			<div class="base_style_color" id='BarAppearance' style="height: 22px;width: 100%; position:fixed; left: 0px;top:0px;z-index: 998" ></div>
			<div class="base_navigation_bar base_style_color base_navigation_item_bar" style="position: fixed;left: 0px;top: 20px;">
				<a class="base_left_item" href="#" onclick="backToast()"> <img class="base_back_icon" src="../../image/icon_jiantou.png" alt=""> </a>
				<span id="title"></span>
			</div>
			<div class="ReviewWeekly_div  " style="margin-top: 64px;" ></div>
			<div class="k-con test-m-bottom70 " id="question_div" >
				<div class="question_main ">
					<div class="swiper-container ">
						<div class="swiper-wrapper" >
				<!--			<div class="swiper-slide" >
								<div class="diaocha_question test-analysis"  id="item' + (i + 1) + '">
									<p class="question_title1">
										<span><em style="color: #F0AD4E">1</em>/4</span><span class="question_type">(单选题)</span>
									</p>
									<p class="question_title">
										<span>Q1</span>鼠标右键的AMD显卡的选项怎么去掉【windows7吧】_百度贴吧</span>
									</p>
									<ul class="question_answer">
										<li>
											<p style="font-size:14px">
												<span>A</span>
												<div class="option_video_div"  video-url="' + VideoUrlArr[0] + '" onclick="toPlayVideo(this)"><img src="../../image/img_voide.png"/></div>
											</p>
											<div class="progressBar option1">
												<div class="Bar_left option1">
													<div class="bar_in Bg1"></div>
												</div>
												<div class="Bar_center">
													25%
												</div>
												<div class="Bar_right"><img src="../../image/icon_Pmini.png" alt=""><span>4</span>
												</div>
											</div>
										</li>
										<li>
											<p style="font-size:14px">
												<span>B</span>你这人轴吗？来测你的倔强指数！你这人轴吗？
											</p>
											<div class="progressBar option2">
												<div class="Bar_left option2">
													<div class="bar_in Bg2"></div>
												</div>
												<div class="Bar_center">
													25%
												</div>
												<div class="Bar_right"  ><img src="../../image/icon_Pmini.png" alt=""><span>4</span>
												</div>
											</div>
										</li>
										<li>
											<p style="font-size:14px">
												<span>C</span>你这人轴吗？来测你的倔强指数！
											</p>
											<div class="progressBar option3">
												<div class="Bar_left option3">
													<div class="bar_in Bg3"></div>
												</div>
												<div class="Bar_center">
													25%
												</div>
												<div class="Bar_right"><img src="../../image/icon_Pmini.png" alt=""><span>4</span>
												</div>
											</div>
										</li>
										<li>
											<p style="font-size:14px">
												<span>D</span>你这人轴吗？来测你的倔强指数！
											</p>
											<div class="progressBar option4">
												<div class="Bar_left option4">
													<div class="bar_in Bg4"></div>
												</div>
												<div class="Bar_center">
													25%
												</div>
												<div class="Bar_right"><img src="../../image/icon_Pmini.png" alt=""><span>4</span>
												</div>
											</div>
										</li>
									</ul>
								</div>
								<div class="footer_div" style="">
									<div id="PieChart" class="PieChart_div"></div>
								</div>
							</div>-->
							
						</div>
					</div>
				</div>
			</div>
			<div class="k-con1 k-text-center k-fixed-bottom test-bottom1" id="sub_div">
				<div class="k-con-part1" id='sub_bt' >
					<div class="test_card_div">
						<a class="base_right_item "style="color: #18B4ED" href="#popover-card">答题卡 </a>
					</div>
				</div>
			</div>
			<div id="popover-card" class="mui-popover test-num-card" style=" width: 97%">
				<div class="mui-scroll-wrapper">
					<div class="mui-scroll" id="scroll-card"></div>
				</div>
			</div>
			<div id="peoAlert" class="weui_dialog_confirm" style="display: none">
				<div class="weui_mask" onclick="openpo()"></div>
				<div class="weui_dialog" style="height: 200px">
					<div class="weui_dialog_hd">
						<div class="mui-scroll-wrapper" >
							<div class="mui-scroll" id="scroll-card"  ></div>
						</div>
					</div>
					<div class="weui_dialog_bd"></div>
				</div>
			</div>
			<div id="backAlert" class="weui_dialog_confirm" style="display: none">
				<div class="weui_mask" ></div>
				<div class="weui_dialog">
					<div class="weui_dialog_hd">
						<strong class="weui_dialog_title" id="checkNum"></strong>
					</div>
					<div class="weui_dialog_bd"></div>
					<div class="weui_dialog_ft">
						<a onclick="cleanCancel()" href="#" class="weui_btn_dialog default"  style="color:#18b4ed">取消</a>
						<a onclick="cleanConfirm()" href="#" class="weui_btn_dialog primary"  style="color:#18b4ed">确定</a>
					</div>
				</div>
			</div>
			<div class="weui_dialog_alert" id="closeAlert" style="display: none;">
				<div class="weui_mask"></div>
				<div class="weui_dialog">
					<div class="weui_dialog_hd">
						<strong class="weui_dialog_title" id="checkNum2"></strong>
					</div>
					<div class="weui_dialog_ft">
						<a onclick="Cancel()" href="#" class="weui_btn_dialog primary"  style="color:#18b4ed">确定</a>
					</div>
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript" src="../../script/api.js"></script>
	<script src="../../script/jquery.min.js" type="text/javascript"></script>
	<script src="../../script/timecontrol.min.js"></script>
	<script type="text/javascript" src="../../script/MD5.js"></script>
	<script src="../../script/swiper-3.4.2.jquery.min.js" type="text/javascript"></script>
	<script type="text/javascript" src="../../script/requestTool.js"></script>
	<script type="text/javascript" src="../../script/echarts.min.js"></script>
	<script type="text/javascript" src="../../script/attachmentManager.js"></script>
	<script type="text/javascript" src="../../script/ResearchUi.js"></script>
	<script src="../../script/common.js"></script>
	<script>
		//题目名称数组
		var daan = new Object();
		var itemNameArr = new Array();
		var qidArr = new Array();
		var pid = "";
		// 计划id
		var cid = "";
		var clickNum = "";
		//课程id
		var chapterid = "";
		//章节id
		var timeNum = "";
		var questionLen = "";
		apiready = function() {
			//开启加载框
			showProgress();
			// 滚动监听
			loadScoreData();
			sendBuriedNotifi(0, ' 老师端的调查结果页', '053');
			scrollUI();
			//获取数据
			//按钮返回提示
			kebackListen();
		}
		function sendBuriedNotifi(busionessid, pagetype, pagetypeid) {
			var userinfo = {
				uid : $api.getStorage('cfnetppuid'),
				jid : $api.getStorage('cfnetppjxid'),
				uname : $api.getStorage('cfnetppusername'),
				vid : api.pageParam.id,
				pid : api.pageParam.pid,
			}
			var data = {
				busionessid : busionessid,
				pagetype : pagetype,
				pagetypeid : pagetypeid,
				sourceurl : api.pageParam.sourceurl,
				sourcetitle : api.pageParam.sourcetitle,
				accesspageurl : window.location.pathname,
				accesspagetitle : document.title,
				userinfo : userinfo
			}
			SendBehaviorTrajectoriesNotifi_Study(data);
		}

		function openList() {
			$('#peoAlert').show();
		}

		function openpo() {
			$('#peoAlert').hide();
		}

		function numGreaterThan(s) {
			if (parseInt(s) > 0) {
				return s;
			} else {
				return 0;
			}
		}

		function setupChart(z_num, qnum, i) {
			var y_num = numGreaterThan(z_num - qnum);
			var true_rate = strIsNum((qnum / z_num) * 100) + '%';
			//			alert(qnum+'vs'+z_num)
			//参与率
			var myChart = echarts.init(document.getElementById('PieChart' + (i + 1) + ''));
			var option1 = {
				//				backgroundColor : '#f3f5f7',
				title : {
					text : '参与率',
					x : 'center',
					subtext : true_rate
				},
				tooltip : {
					trigger : 'item',
					formatter : "{a} <br/>{b} : {c}人 ({d}%)"
				},
				legend : {
					orient : 'vertical',
					left : 'left',
					selectedMode : false,
					borderRadius : 4,
					itemWidth : 12,
					itemHeight : 12,
					data : ['已参与', '未参与']
				},
				series : [{
					name : '人数',
					type : 'pie',
					radius : '55%',
					center : ['50%', '60%'],
					data : [{
						value : qnum,
						name : '已参与',
						itemStyle : {
							normal : {
								color : '#ea68a2'
							}
						}
					}, {
						value : y_num,
						name : '未参与',
						itemStyle : {
							normal : {
								color : '#00b7f0'
							}
						}
					}],
					itemStyle : {
						emphasis : {
							shadowBlur : 10,
							shadowOffsetX : 0,
							shadowColor : 'rgba(0, 0, 0, 0.5)',
						}
					}
				}]
			};
			var option = option1;
			myChart.setOption(option);
		}

		function preData() {
			var pageParam = api.pageParam;
			//			alert(JSON.stringify(pageParam))
			var h = api.winHeight * 0.3;
			$('#popover-card').css('height', h);
			$('#title').text(isStringNull(api.pageParam.cdetailtitle));
			var param = {
				uid : $api.getStorage('cfnetppuid'),
				jid : $api.getStorage('cfnetppjxid'),
				vid : api.pageParam.id,
				pid : api.pageParam.pid,
			};
			cfnetppPOST(url_getSurveyNum, param, true, function(data, status) {
				if (status == 'success') {
					if (data.code == 200) {
						var list = data.data.toString();
						if (list != null && list != '') {
							if (list == 0) {
								loadExamData();
							} else {
								loadScoreData();
							}
						} else {
							back1('该调查题目为空');
						}
					} else if (data.code == 106) {
						back1('调查未找见');
					} else {
					}
				} else {
					api.toast({
						msg : '网络异常',
						duration : 2000,
						location : 'bottom'
					});
				}
			});
		}

		//调查结果页
		function loadScoreData() {
			var pageParam = api.pageParam;
			//			alert(JSON.stringify(pageParam))
			var h = api.winHeight * 0.3;
			$('#popover-card').css('height', h);
			$('#title').text(isStringNull(api.pageParam.cdetailtitle));
			var param = {
				uid : $api.getStorage('cfnetppuid'),
				jid : $api.getStorage('cfnetppjxid'),
				vid : api.pageParam.id,
				pid : api.pageParam.pid,
				id : api.pageParam.rid,
			};
			cfnetppPOST(url_SurveyInfo, param, true, function(data, status) {
				if (status == 'success') {
					hideProgress();
					if (data.code == 200) {
						$('#score_bt').show();
						var list = data.json;
						if (list != null) {
							$('#score').text(getLocalTime(isStringNull(list.btime)) + "~" + getLocalTime(isStringNull(list.etime)));
							if (list.examlist != '' && list.examlist != null) {
								SetResearchScoreUI(list.examlist, list.z_num);
							} else {
								back1('考试题目为空');
							}
						} else {
							back1('考试题目为空');
						}
					} else if (data.code == 106) {
						api.toast({
							msg : '调查未找见',
							duration : 2000,
							location : 'bottom'
						});
					} else {
						api.toast({
							msg : '没有更多数据了',
							duration : 2000,
							location : 'bottom'
						});
					}
				} else {
					api.toast({
						msg : '没有更多数据了',
						duration : 2000,
						location : 'bottom'
					});
				}
			});
		}

		function kebackListen() {
			api.addEventListener({
				name : 'keyback'
			}, function(ret, err) {
				//coding...
				backToast();
			});
		}

		function backToast() {
			sendBuriedNotifi(1, ' 老师端的调查结果页', '053');
			api.closeWin({
			});
		}

		function back1(str) {
			api.hideProgress();
			$("#checkNum2").text(str);
			$('#closeAlert').show();
		}

		function Cancel() {
			$('#closeAlert').hide();
			api.closeWin({
			});
		}

		function SetResearchScoreUI(list, z_num) {
			var data = list;
			questionLen = data.length;
			//	生成答题卡题号
			popoverCardNum(questionLen);
			var PercentageStr = '';
			var questionStr = "";
			var optionStr2 = "";
			var scoreStr = "";
			for (var i = 0; i < questionLen; i++) {
				questionStr = questionsImgIsNull(data[i].ques[0].names);
				scoreStr = (i + 1) + '/' + questionLen + ".";
				$(".swiper-wrapper").append('<div class="swiper-slide">' + '<div class="diaocha_question nomalColor"  id="item' + (i + 1) + '">' + '</div>' + '</div>');
				$("#item" + (i + 1)).append('<p class="question_title1">' + '<span><em style="color: #F0AD4E">' + (i + 1) + '</em>/' + questionLen + '</span>' + '<span class="question_type">' + '(' + data[i].names + ')' + '</span>' + '</p>' + '<p class="question_title">' + '<span>Q' + (i + 1) + '</span>' + questionStr + '</span>' + '</p>' + '<ul class="question_answer">' + '</ul>' + '<div id="PieChart' + (i + 1) + '" class="PieChart_div" style="display: none"></div>');
				if (data[i].qunm > 0 && data[i].qunm != '') {
					if (z_num > 0 && data[i].qunm > 0) {
						//				var pie='#'+PieChart+ (i + 1);
						$("#PieChart" + (i + 1)).show();
						setupChart(z_num, data[i].qunm, i);
					} else {
						$("#PieChart" + (i + 1)).hide();
					}
					$("#PieChart" + (i + 1)).hide();
				}
				if (data[i].names == '单选题' || data[i].names == '判断题') {
					//	是单选或者判断
					for (var k = 0; k < data[i].ques[0].allitem.length; k++) {
						var optionStr = "option" + ((k + 1) % 7);
						var BgStr = "Bg" + ((k + 1) % 7);
						optionStr2 = optionImgIsNull(data[i].ques[0].allitem[k].dname);
						PercentageStr = PercentageIsNull(((data[i].ques[0].allitem[k].num) / (data[i].qunm)) * 100) + "%";
						$("#item" + (i + 1) + " .question_answer").append('<li>' + '<p style="font-size:14px">' + '<span>' + fromCharCode(k + 1) + '.' + '</span>' + optionStr2 + '</p>' + '<div class="progressBar ' + optionStr + '">' + '<div class="Bar_left ' + optionStr + '">' + '<div class="bar_in ' + BgStr + '"></div>' + '</div>' + '<div class="Bar_center">' + PercentageStr + '</div>' + '<div class="Bar_right"><img src="../../image/icon_Pmini.png" alt="">' + '<span>' + data[i].ques[0].allitem[k].num + '</span>' + '</div>' + '</div>' + '</li>');
					}
				} else if (data[i].names == '多选题') {
					//	是多选
					for (var k = 0; k < data[i].ques[0].allitem.length; k++) {
						var optionStr = "option" + ((k + 1) % 7);
						var BgStr = "Bg" + ((k + 1) % 7);
						optionStr2 = optionImgIsNull(data[i].ques[0].allitem[k].dname);
						PercentageStr = PercentageIsNull(((data[i].ques[0].allitem[k].num) / (data[i].qunm)) * 100) + "%";
						$("#item" + (i + 1) + " .question_answer").append('<li>' + '<p style="font-size:14px">' + '<span>' + fromCharCode(k + 1) + '.' + '</span>' + optionStr2 + '</p>' + '<div class="progressBar ' + optionStr + '">' + '<div class="Bar_left ' + optionStr + '">' + '<div class="bar_in ' + BgStr + '"></div>' + '</div>' + '<div class="Bar_center">' + PercentageStr + '</div>' + '<div class="Bar_right"><img src="../../image/icon_Pmini.png" alt="">' + '<span>' + data[i].ques[0].allitem[k].num + '</span>' + '</div>' + '</div>' + '</li>');
					}
				} else if (data[i].names == '论述题') {
				}
				GetWidth();
			}
			var mySwiper = new Swiper('.swiper-container', {
				autoHeight : true,
				//				setWrapperSize :true,
				//用户操作swiper之后，是否禁止autoplay
				autoplayDisableOnInteraction : true,
				direction : 'horizontal',
				loop : false,
			})
			//  试题总数
			allQuestionNum(questionLen);
			// 点击答题卡切换
			$("#popover-card span").on("click", function() {
				var index = $(this).index();
				mySwiper.slideTo(index, 1000, false);
				mui('#popover-card').popover('hide')
			});
		}

		function test(radio) {
			radio.checked = false;
		}

		//  试题总数
		function allQuestionNum(questionLen) {
			$("#questionLength").text("/" + questionLen)
		}

		//	生成答题卡题号
		function popoverCardNum(questionLen) {
			for (var i = 0; i < questionLen; i++)
				$("#scroll-card").append('<span class="qusetion-num">' + (i + 1) + '</span>')
		}
	</script>
</html>